<template>
  <el-main>
    <el-row>
      <el-col :span="12">{{ dateTime }}</el-col>
      <el-col :span="8" class="h2"><h2>错题本</h2></el-col>
      <el-col :span="4">
        <el-button type="primary" size="large" class="btn" @click="gotoBookInput">返回录入</el-button>
      </el-col>

    </el-row>
    <el-table :data="tableData" style="width: 100%" max-height="330" v-model="tableData">
      <el-table-column fixed prop="order" label="序号" width="170"/>
      <el-table-column prop="bookName" label="书目" width="190"/>
      <el-table-column prop="pageNum" label="页码" width="190">
        <template #default="scope">
          <div>
            <el-input v-model="scope.row.pageNum"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="questionNum" label="题号" width="190">
        <template #default="scope">
          <div>
            <el-input v-model="scope.row.questionNum"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="190" align="center">
        <template #default="scope">
          <el-button
              type="danger"
              size="middle"
              @click.prevent="deleteRow(scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>

  <el-footer class="footer">

    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16">

        <el-row>

          <el-col :span="12">
            <el-image :src="require('@/assets/img/book-input/tijiao-left.png')" class="left" @click="gotoBookInput"></el-image>
          </el-col>

            <el-col :span="12">
              <el-image :src="require('@/assets/img/book-input/tijiao-right.png')" class="right" @click="gotoSuccess"></el-image>
            </el-col>
        </el-row>
        <div class="questionsNum">
          <span>您已将{{ questionsNum }}道题加入错题本</span>
        </div>


      </el-col>
      <el-col :span="4"></el-col>
    </el-row>

  </el-footer>

</template>

<script>
import {computed, defineComponent, onMounted, ref} from 'vue'
import {useRouter} from "vue-router";

export default defineComponent({
  name: "problems-paper",
  setup() {
    const router = useRouter();

    const dateTime = ref(); //本页面需要显示的时间

    const tableData = ref([
      {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P12', //页码
        questionNum: 'Q51', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      }, {
        order: '第1题', //序号
        bookName: '数学·必修二·学探诊', //书目
        pageNum: 'P1', //页码
        questionNum: 'Q5', //题号
      },
    ])

    const questionsNum = computed(()=>{
      return tableData.value.length;
    });

    const tableData1 = router.currentRoute.value.params.problems; //todo:2022年2月17日16:40:00想到了数据来源应该是bookDetail，因此去修改bookDetail


    const gotoSuccess = () => {
      router.push({
        path:"/success",
        name:"Success",
        params:{
          "dizhi":"Paper"
        }
      });
    }

    const gotoBookInput = () =>{
      router.push('/book-input');
    }

    /**
     * 删除操作的函数
     */
    const deleteRow = (index) => {
      tableData.value.splice(index, 1)
    }


    onMounted(() => {
      let d = new Date();
      dateTime.value = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"; //获取时间 格式化成yyyy年MM月DD日
      console.log(router.currentRoute.value.params.problems)
    })
    return {
      dateTime,
      tableData,
      deleteRow,
      questionsNum,
      gotoSuccess,
      gotoBookInput,
    }
  }
});
</script>

<style scoped>
.el-main {
  background: #FFFFFF;
  width: 1024px;
  border-top: 1px #3bcdaf solid;
}

.footer {
  height: 100px !important;
  background: #FFFFFF;
}

.h2 {
  margin-top: -30px !important;
}

.btn {
  margin-top: -9px;
  margin-left: 40px;
}


.questionsNum {
  position: absolute;
  bottom: 25px !important;
  margin-left: 210px;
}

.questionsNum span {
  font-size: large;
}

.left {
  width: 75px !important;
  margin-left: 125px !important;
}

.right {
  margin-left: -129px !important;
  width: 352px;
}
</style>